<template>
  <div class="img">
    <!-- url + info.coverImg 两个路径任何一个变化都要引起标签重新渲染 -->
    <img
      v-lazy="imgBaseUrl + (url || info.coverImg)"
      :key="url + info.coverImg"
      alt=""
      width="460"
      height="440"
    />
    <ul class="img__min">
      <li
        v-for="(item, index) in info.imgAltas"
        :key="item.src"
        @mouseenter="changeImg(item.src, index)"
        :class="{ cur: index == indexNum }"
      >
        <img
          v-lazy="imgBaseUrl + item.src"
          alt=""
          width="100"
          height="100"
          :class="{ cur: index == indexNum }"
        />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "ProductImg",
  props: ["info"],
  data() {
    return {
      url: "",
      indexNum: -1,
    };
  },
  methods: {
    changeImg(url, index) {
      this.url = url;
      this.indexNum = index;
    },
  },
  watch: {
    // 判断传入的数据是否变化, 如果变化清空url,好让新传入的图片显示
    info: {
      deep: true,
      handler() {
        this.url = "";
        this.indexNum = -1;
      },
    },
  },
};
</script>

<style lang='less' scoped>
.img {
  margin-right: 31px;
  & > img {
    margin-bottom: 21px;
  }
  width: 460px;
  display: flex;
  flex-direction: column;
  &__min {
    display: flex;
    width: 460px;
    justify-content: space-between;
    li {
      background-color: rgba(220, 220, 220, 0.3);
      &.cur {
        background-color: transparent;
      }
    }
    img {
      position: relative;
      z-index: -1;
      vertical-align: middle;
      cursor: pointer;
      border: 2px solid transparent;
      &.cur {
        border: 2px solid red;
      }
    }
  }
}
</style>